import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';

import { queryRule } from './service';

const TableList = () => {
  const [count, setCount] = useState();
  const actionRef = useRef();
  const columns = [
    {
      title: '操作人',
      dataIndex: 'name',
      render: (dom) => {
        return <a>{dom}</a>;
      },
    },
    {
      title: '描述',
      dataIndex: 'content',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      hideInForm: true,
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInForm: true,
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="日志表格"
        actionRef={actionRef}
        rowKey="id"
        bordered
        search={{
          labelWidth: 120,
        }}
        request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
        postData={(payload) => {
          const { list, total } = payload;
          setCount(total);
          return list;
        }}
        pagination={{
          defaultPageSize: 30,
          showSizeChanger: false,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
        columns={columns}
      />
    </PageContainer>
  );
};

export default TableList;
